<template>
	<q-search v-model="searchParams" :config="searchConfig">
		<template #slotInterface="{ row }">
			<el-form-item label="插槽：" label-width="50px">
				<el-input
					v-model="searchParams[row.key]"
					placeholder="我是一个插槽呀，可自定义我"
				/>
			</el-form-item>
		</template>
		<template #slotRadio="{ row }">
			<el-form-item label="插槽：" label-width="50px" class="radio-wrapper">
				<el-radio-group v-model="searchParams[row.key]" class="ml-4">
					<el-radio label="1">Option 1</el-radio>
					<el-radio label="2">Option 2</el-radio>
				</el-radio-group>
			</el-form-item>
		</template>
	</q-search>
</template>
<script setup lang="ts">
	import { ref } from 'vue';

	const searchForm = [
		{
			componentType: 'text',
			key: 'channelName',
			label: '输入框：',
		},
		{
			key: 'slotInterface',
		},
		{
			key: 'slotRadio',
		},
	];

	const searchParams = ref({});
	const searchConfig = ref({
		labelWidth: 50,
		handlerSearch({ params, type }) {
			/**
			 * params: 搜索项 绑定值
			 * type: 按钮类型 searchForm：搜索按钮  resetForm：重置按钮
			 */
			console.log(params, type);
		},
		// 配置表头内容
		formConfigList: searchForm,
	});
</script>
<style lang="scss">
	.radio-wrapper {
		.ml-4 {
			margin-left: 0;
		}
		.el-form-item__content {
			height: 32px;
			line-height: 32px;
		}
	}
</style>
